<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex row">
			<view :class="[ tabType==0 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(0)">
				<text :class="[ tabType==0 ? 'top-item-title-active':'top-item-title']">本日</text>
				<view :class="[ tabType==0 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==1 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(1)">
				<text :class="[ tabType==1 ? 'top-item-title-active':'top-item-title']">本月</text>
				<view :class="[ tabType==1 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
			<view :class="[ tabType==2 ? 'top-item-active':'top-item', 'flex center']" @click="updataTabType(2)">
				<text :class="[ tabType==2 ? 'top-item-title-active':'top-item-title']">近一年</text>
				<view :class="[ tabType==2 ? 'top-item-line-active':'top-item-line']"></view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" 
			:down="downOption" :up="upOption" top="200rpx" bottom="120rpx">
			<view class="item-view flex center" v-for="(item, index) in dataList" :key="index">
				<view class="item-box flex row aCenter">
					<image class="item-icon" :src="item.goods_image"></image>
					<text class="item-title flex-1">{{item.goods_name}}</text>
					<text class="item-num">数量：{{item.nums}}</text>
				</view>
			</view>
		</mescroll-uni>
		
		<!-- tabbar -->
		<view class="tabbar-view flex row">
			<view class="flex-1 flex center" @click="onTabbar(1)">
				<image src="../../static/tab_home_n.png"></image>
				<text>首页</text>
			</view>
			<view class="flex-1 flex center" @click="onTabbar(2)">
				<image src="../../static/tab_order_n.png"></image>
				<text>门店订单</text>
			</view>
			<view class="tabbar-active flex-1 flex center" @click="onTabbar(3)">
				<image src="../../static/tab_rank_s.png"></image>
				<text>销售排行</text>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: {},// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},// 上拉加载的配置(可选, 绝大部分情况无需配置)
				// 列表数据
				dataList: [],
				
				tabType: 0, // 0 1 2
			}
		},
		methods: {
			onTabbar (type) {
				console.log(type);
				if(type == 1){
					uni.reLaunch({
						url: 'tabbar-home'
					})
				}else if(type == 2){
					uni.reLaunch({
						url: 'tabbar-orders'
					})
				}else if(type == 3){
					// uni.reLaunch({
					// 	url: 'tabbar-rank'
					// })
				}
			},
			updataTabType (type) {
				this.tabType = type;
				this.mescroll.resetUpScroll();
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			downCallback(){
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			upCallback(page) {
				let params = {
					token: uni.getStorageSync("token"),
					p: page.num,
					type: this.tabType,
				}
				console.log(params);
				this.$request("api/order/admin_sales_ranking", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						if(code == 1){
							if(page.num == 1){
								this.dataList = data;
							}else{
								this.dataList = this.dataList.concat(data);
							}
							this.mescroll.endSuccess(data.length);
						}else{
							this.mescroll.endErr()
						}
					}).catch((e) => {
						this.dataList = [];
						this.mescroll.endErr()
						console.log(e);
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #010B24;
	}
	.top-view {
		width: 100%;
		height: 100rpx;
		padding: 0 30rpx;
	}
	.top-item {
		flex: 1;
		height: 100rpx;
	}
	.top-item-active {
		flex: 1;
		height: 100rpx;
	}
	.top-item-title {
		font-size: 30rpx;
		color: #FFFFFFCC;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-title-active {
		font-size: 30rpx;
		color: #FFF;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.top-item-line {
		width: 75rpx;
		height: 5rpx;
		background-color: #010B24;
		border-radius: 3rpx;
	}
	.top-item-line-active {
		width: 75rpx;
		height: 5rpx;
		background-color: #FFF;
		border-radius: 3rpx;
	}
	.item-view {
		width: 100%;
		padding: 10rpx;
	}
	.item-box {
		width: 692rpx;
		background-color: #121C33;
		border-radius: 20rpx;
		padding: 25rpx 30rpx;
	}
	.item-icon {
		width: 95rpx;
		height: 95rpx;
		background-color: #FFF;
		border-radius: 12rpx;
		overflow: hidden;
	}
	.item-title {
		font-size: 30rpx;
		color: #FFF;
		margin-left: 20rpx;
	}
	.item-num {
		font-size: 30rpx;
		color: #9D9FA5;
	}
	
	
	.tabbar-view {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		image {
			width: 36rpx;
			height: 36rpx;
			margin-bottom: 3rpx;
		}
		text {
			font-size: 26rpx;
			color: #FFF;
		}
	}
	.tabbar-active {
		text {
			font-size: 26rpx;
			color: #9D38F3;
		}
	}
</style>
